<template>
	<view class="box">
		
		<view class="list">
			<view class="name">
				<text>笔记标题</text>
				<text style="color: red;">*</text>
			</view>
			<view class="input">
				<u--input
				    placeholder="请输入笔记标题"
				    border="surround"
				    v-model="form.title"
				></u--input>
			</view>
		</view>
		
		
		<view class="list u-f-ac">
			<view class="name" style="margin-bottom: 0;">
				<text>笔记分类</text>
				<text style="color: red;">*</text>
			</view>
			<view class="input typeCate u-f-ajc">
				<picker mode="selector" :range="typeList" :value="curType" @change="typeChange" range-key="name">
					
					<view class="tname">
						{{getTid(form.tid)}}
					</view>
					
				</picker>
			</view>
		</view>
		
		<view class="list animate__animated animate__fadeIn" v-if="urlShow">
			<view class="name">
				<text>网址</text>
			</view>
			<view class="input">
				<u--input
				    placeholder="请填写网址 , 非必填"
				    border="surround"
				    v-model="form.url"
				></u--input>
			</view>
		</view>
		
		<view class="list">
			<view class="name">
				<text>笔记内容</text>
				<text style="color: red;">*</text>
			</view>
			<view class="input">
				<u--textarea v-model="form.note" height="400rpx" :maxlength="-1" placeholder="请输入内容" ></u--textarea>
			</view>
		</view>
		
		
		<view class="list animate__animated animate__fadeIn" v-if="tagShow">
			<view class="name">
				<text>标签</text>
			</view>
			<view class="tags">
				<view class="lst" v-for="(tag,index) in getTags(form.tags)" :key="index" @click="deleteTag(index)">
					<text>{{tag}}</text>
				</view>
			</view>
			<view class="input u-f-ac">
				<view class="l">
					<u--input
					    placeholder="填写标签"
					    border="surround"
						:maxlength="10"
					    v-model="tagsInput"
					></u--input>
				</view>
				<view class="r">
					<button class="btn" :disabled="tagsInput.length < 2" @click="pushTags">添加</button>
				</view>
			</view>
		</view>
		
		
		<view class="list animate__animated animate__fadeIn" v-if="userShow">
			<view class="name">
				<text>记录账号</text>
				<text class="push" @click="adduserArr">(增加一个账号)</text>
			</view>
			<view class="userlist">
				<view class="lst" v-for="(item,index) in form.userlist" :key="index">
					<view class="title u-f-ac u-f-jsb">
						<view class="l u-f-ac">
							<view class="icon"></view>
							<view class="u-f-ac">
								<u--input
									class="iname"
								    placeholder="账号标题"
								    border="none"
									color="#4E4C56"
									fontSize="30rpx"
								    v-model="item.title"
								></u--input>
							</view>
						</view>
						<view class="delete" @click="deleteUser(index,item)">
							<u-icon name="trash" size="32rpx" color="#ff0000"></u-icon>
						</view>
					</view>
					<view class="note">
						<u--input
							class="iname"
						    placeholder="账号备注"
						    border="none"
							color="#6b6b6b"
							fontSize="24rpx"
						    v-model="item.note"
						></u--input>
					</view>
					<view class="dataBox">
						<view class="lt u-f-ac u-f-jsb">
							<view class="u-f-ac u-f1">
								<view class="uname">
									<text>账号：</text>
								</view>
								<view class="value u-f1">
									<u--input
										class="iname"
									    placeholder="填写需要记录的账号"
									    border="none"
										color="#4f83ca"
										fontSize="28rpx"
									    v-model="item.username"
									></u--input>
								</view>
							</view>
						</view>
						<view class="lt u-f-ac u-f-jsb">
							<view class="u-f-ac u-f1">
								<view class="uname">
									<text>密码：</text>
								</view>
								<view class="value u-f1">
									<u--input
										class="iname"
									    placeholder="填写需要记录账号的密码"
									    border="none"
										color="#4f83ca"
										fontSize="28rpx"
									    v-model="item.password"
									></u--input>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 功能选择 -->
		<view class="menu u-f-ac">
			<view class="lst u-f-ajc" :class="{active:urlShow}" @click="urlClick">
				<u-icon name="attach" size="38rpx" :color="urlShow?'#ff5d50':'#878787'"></u-icon>
			</view>
			<view class="lst u-f-ajc" :class="{active:userShow}" @click="userShow=!userShow">
				<u-icon name="man-add" size="38rpx" :color="userShow?'#ff5d50':'#878787'"></u-icon>
			</view>
			<view class="lst u-f-ajc" :class="{active:tagShow}" @click="tagShowClick">
				<u-icon name="tags" size="38rpx" :color="tagShow?'#ff5d50':'#878787'"></u-icon>
			</view>
		</view>
		
		
		<view class="submitPost">
			<u-button type="primary" :loading="loading" :disabled="form.title.length < 4 || form.note.length < 4" text="修改笔记" @click="submitPost"></u-button>
		</view>
		
	</view>
</template>

<script>
	import { noteTypeList , detailsNote , noteEdit , deleteNoteUser } from '@/http/api'
	export default {
		data() {
			return {
				form:{
					title:'',
					url:'',
					note:'',
					tags:'',
					tid:'',
					userlist:[]
				},
				curType:0,
				loading:false,
				tagsInput:'',
				urlShow:false,
				userShow:false,
				tagShow:false,
				typeShow:false,
				typename:'',
				typeList:[]
			}
		},
		async onLoad(data) {
			this.nid = data.id
			await this.noteTypeList()
		},
		methods: {
			// 提交笔记
			async submitPost(){
				this.loading = true
				let form = this.deepClone2(this.form);
				form.userlist = JSON.stringify(form.userlist)
				
				let res = await noteEdit(form,()=>{this.loading = false})
				
				if(res.code==1){
					uni.showToast({
						title:'修改成功'
					})
				}
				
			},
			async noteTypeList(){
				let res = await noteTypeList();
				this.typeList = res.data
				
				let note = await detailsNote(this.nid)
				this.form.tid = note.data.tid
				this.form.id = note.data.id
				this.form.title = note.data.title
				this.form.url = note.data.url
				this.form.note = note.data.note
				this.form.tags = note.data.tags
				this.form.userlist = note.data.userlist.data
				this.typename = note.data.tname
				
				if(this.form.userlist.length)this.userShow = true
				if(this.form.tags.length)this.tagShow = true
				if(this.form.url.length)this.urlShow = true
				
			},
			// 分类选择监听
			typeChange(e){
				this.form.tid = this.typeList[e.detail.value].id
				this.curType = e.detail.value
			},
			// 根据id返回分类名字
			getTid(id){
				if(this.typeList.length){
					let data = this.typeList.find(item=>item.id==id);
					if(data){
						return data['name']
					}
					return this.typename;
				}
			},
			// 添加标签
			pushTags(){
				let arr = this.getTags(this.form.tags)
				if(arr.indexOf(this.tagsInput)==-1){
					
					if(arr.length > 4){
						return uni.showToast({
							title: '数量已上限',
							icon:'error'
						});
					}else{
						arr.push(this.tagsInput)
						this.tagsInput = ''
					}
					
				}else{
					return uni.showToast({
						title: '已经存在相同标签',
						icon:'error'
					});
				}
				this.form.tags = arr.join(',')
				return uni.showToast({title: '添加成功'});
			},
			// 删除标签
			deleteTag(index){
				let arr = this.getTags(this.form.tags)
				arr.splice(index,1)
				this.form.tags = arr.join(',')
			},
			// 网址功能启用关闭
			urlClick(){
				if(this.urlShow){
					if(this.form.url.length){
						uni.showModal({
							title: '操作提示',
							content: '是否清空已输入网址？',
							cancelText: '不需要',
							confirmText: '清空',
							success: res => {
								if(res.confirm){
									this.form.url = ''
								}
								this.urlShow = false
							}
						});
					}else{
						this.form.url = ''
						this.urlShow = false
					}
					
				}else{
					this.urlShow = true
				}
			},
			// 增加账号数量
			adduserArr(){
				this.form.userlist.push({
					username:'',
					password:'',
					title:this.form.userlist.length?'副账号':'主账号',
					note:''
				})
			},
			// 删除账号
			async deleteUser(index,item){
				uni.showLoading({
					title:'正在删除...',
					mask:true
				})
				if(!item.id){
					this.form.userlist.splice(index,1)
					uni.hideLoading()
				}else{
					let res = await deleteNoteUser(item.id,()=>{uni.hideLoading()});
					if(res.code==1){
						this.form.userlist.splice(index,1)
						uni.hideLoading()
					}
				}
				
			},
			// 标签功能启用关闭
			tagShowClick(){
				if(this.tagShow){
					if(this.form.tags.length){
						uni.showModal({
							title: '操作提示',
							content: '是否清空已输入的标签？',
							cancelText: '不需要',
							confirmText: '清空',
							success: res => {
								if(res.confirm){
									this.form.tags = ''
								}
								this.tagShow = false
							}
						});
					}else{
						this.form.tags = ''
						this.tagShow = false
					}
					
				}else{
					this.tagShow = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	padding: 0 30rpx;
	background-color: #fffdfb;
	padding-bottom: 30rpx;
	.header{
		color: white;
		font-size: 30rpx;
		.name{
			margin-left: 5rpx;
			margin-right: 10rpx;
		}
	}
	.list{
		padding: 30rpx 0;
		border-top: 1px solid #fafafa;
		.name{
			font-size: 28rpx;
			color: #4b4b4b;
			margin-bottom: 20rpx;
			.push{
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #4f83ca;
			}
		}
		.tags{
			margin-bottom: 30rpx;
			.lst{
				display: inline-block;
				padding: 1rpx 15rpx;
				border-radius: 5rpx;
				font-size: 24rpx;
				background-color: #f7d11e;
				color: #885f44;
				margin-right: 20rpx;
			}
		}
		.input{
			.l{
				width: 250rpx;
			}
			.r{
				margin-left: 30rpx;
				.btn{
					height: 74rpx!important;
					line-height: 74rpx;
					font-size: 30rpx;
					background-color: #fdfdfd;
					width: 140rpx!important;
				}
			}
		}
		.typeCate{
			margin-left: 30rpx;
			background-color: #F7F9F8;
			color: #C8CEDA;
			padding: 5rpx 20rpx;
			border-radius: 5rpx;
			font-size: 24rpx;
		}
		.userlist{
			.lst{
				.title{
					.icon{
						height: 18rpx;
						width: 8rpx;
						margin-right: 10rpx;
						background-color: #ff5d50;
					}
					.iname{
						font-size: 30rpx;
						color: #4E4C56;
					}
				}
				.dataBox{
					background-color: #f8f8f8;
					padding: 0 20rpx;
					margin: 25rpx 0;
					border-radius: 10rpx;
					.lt{
						margin: 10rpx 0;
						padding: 20rpx 0;
						&:nth-of-type(1){
							border-bottom: 1px solid #f5f5f5;
						}
						.uname{
							font-size: 28rpx;
							color: #4E4C56;
						}
						.value{
							font-size: 28rpx;
							padding: 5rpx 20rpx;
							color: #4f83ca;
						}
					}
				}
			}
		}
	}
	.menu{
		margin-top: 30rpx;
		.lst{
			margin-right: 40rpx;
			border: 1px solid #e6e6e6;
			border-radius: 10rpx;
			height: 60rpx;
			width: 60rpx;
		}
		.active{
			border-color: #ff5d50;
		}
	}
	.submitPost{
		margin: 60rpx 100rpx;
	}
}


</style>
